<template>
  <div>
    <div class="XboxTop">
      <div class="XboxTop_title">航标在线管理</div>
    </div>
    <div class="XboxTop_con" style="padding: 1rem;overflow-y: auto;scrollbar-width: none;">
      <div v-for="(item, i) in listData" :key="i" class="list_item" @click="getClick(item, i)">
        <div class="list_item_top">
          <div style="display: flex; align-items: center;">
            <div style="margin-right: 1rem;">
              <i class="el-icon-arrow-up" style="font-size: 1.8rem;" v-if="item.select"></i>
              <i class="el-icon-arrow-down" style="font-size: 1.8rem;" v-else></i>
            </div>
            <div style="color: #80F2FF;">{{ item.name }}</div>
          </div>
          <div style="display: flex;align-items: center;">
            <div style="margin-right: 1rem;" :style="{ color: item.zt == 0 ? '#32CD32' : '#FF7878' }">{{ item.zt == 0 ?
              '在线' : '离线' }}
            </div>
            <div style="margin-right: 1rem;">遥测</div>
            <div>终端定位</div>
          </div>
        </div>
        <div v-if="item.select" style="padding: 0.5rem;">
          <div style="width: 100%;height: 1rem;position: relative;display: flex;align-items: center;margin-bottom: 1rem;">
            <div style="width: 100%;height: 0.3rem;background-color:rgba(32, 135, 249, 0.20);"></div>
            <div style="width: 2rem;height: 100%;background-color: #FF7878;position: absolute;left:15%;"></div>
            <div style="width: 2rem;height: 100%;background-color: #FF7878;position: absolute;right:26%;"></div>
            <div style="width: 2rem;height: 100%;background-color: #fff;position: absolute;right:17%;"></div>
            <div style="width: 2rem;height: 100%;background-color: #fff;position: absolute;right:5%;"></div>
          </div>
          <div style="display: flex;justify-content: space-between;">
            <div><span class="text_lable">航道：</span><span>{{ item.name }}</span></div>
            <div style="display: flex;">
              <div style="margin-right: 1rem;"><span class="text_lable">类型：</span><span>侧面标</span></div>
              <div><span class="text_lable">类别：</span><span>左岸</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  //变量
  data() {
    return {
      listData: [{ name: "杭湖锡线5号标", select: true, zt: 0 }, { name: "杭湖锡线5号标", select: false, zt: 0 }],
    }
  },
  //初始
  mounted() { },
  //事件
  methods: {
    getClick(item, i) {
      this.listData[i].select = !this.listData[i].select
    }
  },
  //销毁
  beforeDestroy() { }
}
</script>
<style scoped>
.list_item {
  border: 1px solid #0E5FFF;
  margin-bottom: 1rem;
}

.list_item_top {
  background: url("~@/assets/hb_img/bj/bg_hb.png") no-repeat;
  background-size: 100% 100%;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text_lable {
  color: rgba(255, 255, 255, 0.65);
}
</style>